<template>
  <div class="together-view">
    <!-- 顶部标题 -->
    <header class="page-header">
      <div class="title-row">
        <button class="back-btn" @click="goBack" aria-label="返回">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M15 18l-6-6 6-6" />
          </svg>
        </button>
        <span class="cube"></span>
        <div class="title-texts">
          <h1>添置</h1>
          <p class="subtitle">为小天地添置好用好玩的专属功能</p>
        </div>
      </div>
    </header>

    <!-- 说明输入卡片 -->
    <section class="idea-card">
      <textarea v-model="draft" class="idea-input" :maxlength="maxLen" placeholder="做一个功能吧～简单描述下用途即可。"></textarea>

      <div class="input-toolbar">
        <div class="left-tools">
          <button class="icon-btn" @click="onInsert('拍照/上传占位')" aria-label="拍照">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="5" width="18" height="14" rx="2"></rect>
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M8 5l1.5-2h5L16 5"></path>
            </svg>
          </button>
          <button class="icon-btn" @click="onInsert('选择模板占位')" aria-label="模板">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="4" width="18" height="6" rx="1.5"></rect>
              <rect x="3" y="14" width="18" height="6" rx="1.5"></rect>
            </svg>
          </button>
        </div>
        <div class="spacer"></div>
        <div class="right-tools">
          <span class="count">{{ draft.length }}/{{ maxLen }}</span>
          <button class="add-btn" @click="createIdea">创建</button>
        </div>
      </div>

      <div class="helper-row">
        <span class="tip">可以试试：</span>
        <div class="chips">
          <button v-for="(s, i) in suggestions" :key="i" class="chip chip-sm" @click="appendSuggestion(s)">{{ s
            }}</button>
        </div>
      </div>
    </section>

    <!-- ===== 内嵌创建面板（创建中 / 进行中 / 已完成） ===== -->
    <transition name="fade">
      <section v-if="showInline" class="inline-create" :class="{ collapsed: isCollapsed }">
        <!-- 顶部状态标签 -->
        <div class="state-tabs" ref="stateTabsRow">
          <span class="state-ink" :style="stateInkStyle"></span>
          <button v-for="(t, idx) in tabs" :key="t.key" class="state-tab" :class="{ active: activeTab === idx }"
            :ref="el => (stateTabEls[idx] = el as HTMLButtonElement)" @click="onTabClick(idx)">
            {{ t.name }}
          </button>
          <button class="collapse-toggle" v-if="isCollapsed" @click="isCollapsed = false">展开产图过程</button>
        </div>

        <!-- 流程内容 -->
        <div v-show="!isCollapsed">
          <!-- 1. 创建中 -->
          <div v-show="activeTab === 0" class="panel">
            <div class="tip-line"><span class="caret">▾</span>正在创建中{{ dots }}，可以先看看其他创意</div>
            <div class="img-row">
              <div class="img-ph"></div>
              <div class="img-ph"></div>
            </div>
            <div class="actions">
              <button class="btn soft" @click="collapseInline">先不看</button>
              <div></div>
              <div></div>
            </div>
          </div>

          <!-- 2. 进行中 -->
          <div v-show="activeTab === 1" class="panel">
            <div class="tip-line"><span class="caret">▾</span>正在进行中{{ dots }}，请稍候</div>
            <div class="img-row">
              <div class="img-ph"></div>
              <div class="img-ph"></div>
            </div>
            <ul class="steps">
              <li :class="{ done: stepReveal >= 1 }">正在进行功能设计</li>
              <li :class="{ done: stepReveal >= 2 }">功能设计已完成，正在开发中……</li>
              <li :class="{ done: stepReveal >= 3 }">开发已完成，开始部署，这是最后一步啦</li>
            </ul>
            <div class="actions">
              <button class="btn soft" @click="prevTab">上一步</button>
              <div></div>
              <div></div>
            </div>
          </div>

          <!-- 3. 已完成（贴纸选择） -->
          <div v-show="activeTab === 2" class="panel">
            <div v-if="!usedSticker" class="sticker-box">
              <p class="sticker-title">
                选择一张贴纸，或
                <a href="javascript:void(0)" @click="regenerate">重新生成</a>
              </p>

              <div class="sticker-grid">
                <div v-for="(s, i) in stickers" :key="i" class="sticker"
                  :class="{ selected: selectedStickerIndex === i }" @click="select(i)">
                  <div class="sticker-img">
                    <img :src="s.img" alt="" />
                    <span class="tick" v-if="selectedStickerIndex === i">✓</span>
                  </div>
                </div>
              </div>

              <div class="row-actions" v-show="selectedStickerIndex !== null">
                <div></div>
                <van-button class="" @click="useThis">就用这个</van-button>
                <div></div>
              </div>
            </div>

            <div v-else class="result-card in-panel">
              <img class="result-img" :src="SUCCESS_IMG" alt="" />
              <p class="result-tip">已放入你的小天地，返回即可看到新增图标</p>
            </div>
          </div>
        </div>
      </section>
    </transition>

    <!-- 热门创意 & 列表（保持不变） -->
    <div class="section-title"><span class="label">热门创意</span></div>
    <nav class="category-row" ref="catRowEl">
      <span class="cat-ink" :style="inkStyle"></span>
      <button v-for="(c, idx) in categories" :key="c.key" class="cat-btn cat-lg"
        :class="{ active: activeCat === c.key }" :ref="el => (catBtnEls[idx] = el as HTMLButtonElement)"
        @click="setActiveCat(c.key)">{{ c.name }}</button>
    </nav>

    <section class="cards-list">
      <article v-for="item in filteredIdeas" :key="item.id" class="idea-item">
        <div class="left-icon" :class="item.iconKey"></div>
        <div class="mid">
          <h3 class="item-title">{{ item.title }}</h3>
          <p class="desc">{{ item.desc }}</p>
        </div>
        <div class="right"><button class="ghost-btn" @click="cloneTemplate(item)">创建同款</button></div>
      </article>
    </section>

    <div class="bottom-gap"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onBeforeUnmount, nextTick, watch } from 'vue'

const maxLen = 120
const draft = ref('')
const suggestions = ['运动打卡', '记事贴', '五子棋', '相册本'] as const

/* 示例图片 */
const STICKER_A = '/public/together/lose_fat_1.png'
const STICKER_B = '/public/together/lose_fat_2.png'
const SUCCESS_IMG = '/public/together/lose_fat_1.png'

type CatKey = 'all' | 'habit' | 'emotion' | 'game' | 'brain'
type IconKey = 'book' | 'heart' | 'album'

const categories: { key: CatKey; name: string }[] = [
  { key: 'all', name: '推荐' },
  { key: 'habit', name: '习惯' },
  { key: 'emotion', name: '情感' },
  { key: 'game', name: '游戏' },
  { key: 'brain', name: '脑洞' }
]
const activeCat = ref<CatKey>('all')

/* 分类 ink */
const catRowEl = ref<HTMLElement | null>(null)
const catBtnEls = ref<HTMLButtonElement[]>([])
const inkStyle = ref<Record<string, string>>({ opacity: '0' })
function updateInk() {
  const row = catRowEl.value
  const btn = catBtnEls.value.find(b => b?.classList.contains('active'))
  if (!row || !btn) { inkStyle.value.opacity = '0'; return }
  const r = row.getBoundingClientRect()
  const b = btn.getBoundingClientRect()
  const left = b.left - r.left + row.scrollLeft
  inkStyle.value = { width: `${b.width}px`, height: '32px', transform: `translateX(${left}px)`, opacity: '1' }
}
function setActiveCat(key: CatKey) { activeCat.value = key; nextTick(updateInk) }
watch(activeCat, () => nextTick(updateInk))

/* 列表 */
interface Idea { id: number; cat: CatKey; title: string; desc: string; likes: number; iconKey: IconKey }
const ideas = ref<Idea[]>([
  { id: 1, cat: 'brain', title: '故事接龙', desc: '大家轮流续写，合集里自动成书！', likes: 104, iconKey: 'book' },
  { id: 2, cat: 'emotion', title: '心情树洞', desc: '匿名倾诉，或仅自己可见，记录心情瞬间。', likes: 256, iconKey: 'heart' },
  { id: 3, cat: 'habit', title: '美妙纪念册', desc: '每一次相处都值得纪念，用图片和文字留住美好。', likes: 1100, iconKey: 'album' }
])
const filteredIdeas = computed(() =>
  activeCat.value === 'all' ? ideas.value : ideas.value.filter(i => i.cat === activeCat.value)
)

/* ===== 内嵌创建面板 ===== */
const showInline = ref(false)
const activeTab = ref(0)
const tabs = [{ key: 'creating', name: '创建中' }, { key: 'progress', name: '进行中' }, { key: 'done', name: '已完成' }]

const isCollapsed = ref(false)

/* 顶部状态 ink */
const stateTabsRow = ref<HTMLElement | null>(null)
const stateTabEls = ref<HTMLButtonElement[]>([])
const stateInkStyle = ref<Record<string, string>>({ opacity: '0' })
function updateStateInk() {
  const row = stateTabsRow.value
  const btn = stateTabEls.value[activeTab.value]
  if (!row || !btn) { stateInkStyle.value.opacity = '0'; return }
  const r = row.getBoundingClientRect()
  const b = btn.getBoundingClientRect()
  const left = b.left - r.left + row.scrollLeft
  stateInkStyle.value = {
    width: `${b.width}px`,
    height: '38px',
    transform: `translateX(${left}px)`,
    opacity: '1'
  }
}

/* 动画控制 */
const dots = ref('')
const stepReveal = ref(0)
let mainTimer: number | null = null
let dotsTimer: number | null = null
let stepTimer: number | null = null

/* 贴纸 */
const stickers = ref<{ img: string }[]>([{ img: STICKER_A }, { img: STICKER_B }])
const selectedStickerIndex = ref<number | null>(null)
const usedSticker = ref<boolean>(false)

/* 动画函数 */
function startDots() {
  stopDots()
  let i = 0
  dotsTimer = window.setInterval(() => { i = (i + 1) % 4; dots.value = '.'.repeat(i) }, 400)
}
function stopDots() { if (dotsTimer) { clearInterval(dotsTimer); dotsTimer = null } }
function startStepReveal() {
  stopStepReveal()
  stepReveal.value = 0
  stepTimer = window.setInterval(() => {
    stepReveal.value = Math.min(stepReveal.value + 1, 3)
    if (stepReveal.value >= 3) stopStepReveal()
  }, 2000)
}
function stopStepReveal() { if (stepTimer) { clearInterval(stepTimer); stepTimer = null } }

/* 流程控制 */
function startAutoFlow() {
  stopAutoFlow()
  startDots()
  activeTab.value = 0
  stepReveal.value = 0
  selectedStickerIndex.value = null
  usedSticker.value = false
  isCollapsed.value = false
  mainTimer = window.setInterval(() => {
    if (activeTab.value < 2) {
      activeTab.value += 1
      if (activeTab.value === 1) startStepReveal()
      if (activeTab.value === 2) stopAutoFlow()
      nextTick(updateStateInk)
    }
  }, 2000)
}
function stopAutoFlow() { if (mainTimer) { clearInterval(mainTimer); mainTimer = null } }

/* 事件 */
function onTabClick(idx: number) {
  activeTab.value = idx
  startDots()
  if (idx === 1) startStepReveal(); else stopStepReveal()
}
function createIdea() {
  if (!draft.value.trim()) { alert('请先简单描述你的创意～'); return }
  showInline.value = true
  nextTick(() => { updateStateInk(); startAutoFlow(); })
}
function collapseInline() { isCollapsed.value = true }
function prevTab() { activeTab.value = Math.max(activeTab.value - 1, 0); if (activeTab.value === 1) startStepReveal(); else stopStepReveal() }
function regenerate() { alert('重新生成贴纸（接入你的生成逻辑）') }
function select(i: number) { selectedStickerIndex.value = i }

/** ✅ 关键改动：useThis 不跳转，改为写入 localStorage 的一次性消息 */
function useThis() {
  if (selectedStickerIndex.value === null) return
  const img = stickers.value[selectedStickerIndex.value].img
  const payload = { src: img, alt: '自定义功能', ts: Date.now() }
  try {
    localStorage.setItem('together_pending_new_icon', JSON.stringify(payload))
    usedSticker.value = true
    // 此处不跳转。用户手动返回 detail 即可看到新增图标
  } catch (e) {
    alert('保存到小天地失败，请稍后再试')
  }
}

/* 其它 */
function appendSuggestion(s: string) {
  if (!draft.value) draft.value = s
  else if (!draft.value.includes(s)) draft.value += (draft.value.endsWith('。') ? '' : '。') + s
}
function onInsert(text: string) { draft.value += (draft.value ? ' ' : '') + `[${text}]` }
function cloneTemplate(item: any) { draft.value = `想创建「${item.title}」的同款功能：${item.desc}`; window.scrollTo({ top: 0, behavior: 'smooth' }) }
function goBack() { if (history.length > 1) history.back() }

/* 初始 & 清理 */
nextTick(updateInk)
watch(activeTab, () => nextTick(updateStateInk))
onBeforeUnmount(() => { stopAutoFlow(); stopDots(); stopStepReveal() })
</script>

<style scoped>
:root {
  --c-primary: #b9673a;
  --c-primary-600: #a2572e;
  --c-text: #2b2b2b;
  --c-border: #eee5df;
  --radius: 14px;

  --btn-soft-bg: #fff7f2;
  --btn-soft-text: #2f3b49;
}

.together-view {
  max-width: 430px;
  margin: 0 auto;
  padding: 12px 14px 28px;
  color: var(--c-text);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial;
}

/* Header */
.page-header .title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.back-btn {
  border: none;
  background: transparent;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  color: var(--c-primary-600);
  cursor: pointer;
}

.cube {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: conic-gradient(from 90deg at 50% 50%, #e9c9b7, #d7a785, #e9c9b7);
  box-shadow: inset 0 0 0 2px #caa185;
}

.title-texts h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--c-primary-600);
}

/* 输入卡片 */
.idea-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(185, 103, 58, .08);
  padding: 12px;
}

.idea-input {
  width: 100%;
  min-height: 108px;
  border: none;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  font-size: 14px;
  color: var(--c-text);
}

/* 工具栏 */
.input-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: nowrap;
}

.left-tools {
  display: flex;
  gap: 10px;
}

.right-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spacer {
  flex: 1;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #faf6f3;
  color: var(--c-primary-600);
  border: 1px solid var(--c-border);
}

.count {
  font-size: 12px;
  color: #999;
  line-height: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
}

.add-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(185, 103, 58, .12);
  color: var(--c-primary-600);
  border: 1px dashed var(--c-primary-600);
  display: inline-flex;
  align-items: center;
}

/* 建议 chips */
.helper-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.tip {
  font-size: 12px;
  color: #999;
}

.chips {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  border-radius: 999px;
  border: 1px solid #f0e2d9;
  background: #fff8f3;
  color: var(--c-primary-600);
}

.chip-sm {
  padding: 5px 9px;
  font-size: 11.5px;
  line-height: 1;
}

/* 标题下划线 */
.section-title {
  position: relative;
  margin: 18px 2px 12px;
  text-align: left;
}

.section-title .label {
  font-weight: 700;
  font-size: 16px;
  padding-bottom: 4px;
  display: inline-block;
  position: relative;
}

.section-title .label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary-600), #f5d9c8 70%, transparent);
  border-radius: 2px;
}

/* 分类 */
.category-row {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 6px 2px 10px;
}

.cat-ink {
  position: absolute;
  top: 6px;
  left: 0;
  height: 32px;
  width: 0;
  transform: translateX(0);
  border-radius: 999px;
  background: #f0e2d9;
  box-shadow: 0 6px 14px rgba(240, 226, 217, .5);
  transition: transform .25s, width .25s, opacity .2s;
  z-index: 0;
  pointer-events: none;
}

.cat-btn {
  position: relative;
  z-index: 1;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  background: transparent;
  color: var(--c-primary-600);
  border: 1px solid #f0e2d9;
  transition: color .2s, border-color .2s;
}

.cat-btn.active {
  color: var(--c-primary-600);
  border-color: #f0e2d9;
}

/* ===== 顶部状态标签：三等分 ===== */
.state-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px 0 10px;
}

.state-ink {
  position: absolute;
  top: 6px;
  left: 0;
  height: 38px;
  width: 0;
  transform: translateX(0);
  border-radius: 999px;
  background: #f0e2d9;
  box-shadow: 0 6px 14px rgba(240, 226, 217, .5);
  transition: transform .25s, width .25s, opacity .2s;
  z-index: 0;
  pointer-events: none;
}

.state-tab {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px 0;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid #f0e2d9;
  background: transparent;
  color: #8a5a3c;
  text-align: center;
}

.state-tab.active {
  color: #8a5a3c;
  border-color: #f0e2d9;
}

.collapse-toggle {
  grid-column: 1 / -1;
  margin-left: auto;
}

/* 面板内容 */
.inline-create {
  margin-top: 12px;
  background: #fff;
  border: 1px solid #f0e2d9;
  border-radius: 14px;
  padding: 10px 12px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}

.inline-create.collapsed {
  padding-bottom: 8px;
}

.panel {
  border: 1px solid #eee5df;
  border-radius: 14px;
  padding: 12px;
}

.tip-line {
  color: #6d6d6d;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.caret {
  color: #bbb;
}

.img-row {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.img-ph {
  width: 150px;
  height: 80px;
  background: #e9e9e9;
  border-radius: 10px;
  display: block;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}

.steps li {
  margin: 8px 0;
  color: #6d6d6d;
}

.steps li::before {
  content: '○';
  margin-right: 8px;
  color: #bbb;
}

.steps li.done {
  color: #3f7f4f;
  font-weight: 600;
}

.steps li.done::before {
  content: '✔';
  color: #3f7f4f;
}

/* 底部按钮区：三等分，与上面标签同宽 */
.panel .actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.panel .actions .btn {
  width: 100%;
  padding: 10px 0;
  border: none;
  background: #eee9e6;
  color: var(--btn-soft-text);
  border-radius: 999px;
  font-weight: 500;
}

/* 贴纸区 */
.sticker-title {
  margin: 0 0 10px 0;
  color: #6d6d6d;
  font-size: 13px;
}

.sticker-title a {
  color: #b9673a;
  text-decoration: underline;
}

.sticker-grid {
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.sticker {
  width: calc(50% - 1px);
  border: 1px solid #e6d7cd;
  border-radius: 12px;
  padding: 8px;
  background: #fff;
  cursor: pointer;
}

.sticker.selected {
  border-color: #b9673a;
  box-shadow: none;
}

.sticker-img {
  height: 88px;
  border-radius: 10px;
  border: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

.sticker-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.tick {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #3f7f4f;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  border: 1px solid #dfe7df;
}

/* 贴纸页“就用这个”与上面同宽 */
.row-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.row-actions .btn.big {
  width: 100%;
  padding: 10px 0;
}

/* 覆盖式结果样式 */
.result-card.in-panel {
  border-radius: 14px;
  padding: 18px 12px 16px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.result-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .08));
}

.result-tip {
  margin: 0;
  color: #666;
}

/* 列表 */
.cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.idea-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}

.left-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
}

.left-icon.book {
  background-image: url('/together/gushi.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 20%;
}

.left-icon.heart {
  background-image: url('/together/xinqing.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 20%;
}

.left-icon.album {
  background-image: url('/together/jinian.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 20%;
}

.mid .item-title {
  margin: 0 0 6px 0;
  font-size: 15px;
}

.desc {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.ghost-btn {
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed var(--c-primary-600);
  color: var(--c-primary-600);
  font-weight: 600;
}

.ghost-btn:active {
  transform: translateY(1px);
}

.bottom-gap {
  height: 22px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .18s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>